import { useEffect, useMemo, useState } from "react";
import { createPortal } from "react-dom";
import { useComponentsStore, getComponentById } from "../../stores/components";

/* 一些可以不写在函数式组件内的变量和方法 */
interface HoverMaskProps {
    containerClassName: string;
    componentId: number;
    portalWrapperClassName: string;
}

export function HoverMask({ componentId, containerClassName, portalWrapperClassName }: HoverMaskProps) {
    /* props变量书写区 */

    /* hooks变量书写区 */ 
    const [position, setPosition] = useState({
        left: 0,
        top: 0,
        width: 0,
        height: 0,
        labelTop: 0,
        labelLeft: 0
    })

    const el = useMemo(()=>{
        // 代码优化前
        /* const el = document.createElement('div');
        el.className = `wrapper`;

        const container = document.querySelector(`.${containerClassName}`);
        container!.appendChild(el);
        return el; */

        // 代码优化后
        return document.querySelector(`.${portalWrapperClassName}`)
    }, [])
    const { components } = useComponentsStore();
    const curComponent = useMemo(()=>{
        return getComponentById(componentId, components);
    }, [componentId]);
    /* 非hooks变量书写区 */ 
    
    /* 方法书写区 */ 
    const updatePositon = () => {
        if(!componentId) return;
        const container = document.querySelector(`.${containerClassName}`);
        if(!container) return;
        const node = document.querySelector(`[data-component-id="${componentId}"]`);
        if(!node) return;

        const { top, left, width, height } = node.getBoundingClientRect();
        const { top: containerTop, left: containerLeft } = container.getBoundingClientRect();

        let labelTop = top - containerTop + container.scrollTop;
        const labelLeft = left - containerLeft + width;

        // 处理边界情况
        if(labelTop <= 0) {
            labelTop -= -20
        }

        setPosition({
            top: top - containerTop + container.scrollTop,
            left: left - containerLeft + container.scrollTop,
            width,
            height,
            labelTop,
            labelLeft
        })
    }
    /* 生命周期书写区 */ 
    useEffect(()=>{
        updatePositon()
    }, [componentId, components])
    /* DOM结构书写区 */ 
    return createPortal((<>
        <div
            style={{
                position: 'absolute',
                left: position.left,
                top: position.top,
                backgroundColor: "rgba(0,0,255,0.1)",
                border: "1px dashed blue",
                pointerEvents: 'none',
                width: position.width,
                height: position.height,
                zIndex: 12,
                borderRadius: 4,
                boxSizing: 'border-box'
            }}></div>
        <div style={{
            position: 'absolute',
            left: position.labelLeft,
            top: position.labelTop,
            fontSize: '14px',
            zIndex: 13,
            display: (!position.width || position.width < 10) ? 'none' : 'inline',
            transform: 'translate(-100%, -100%)'
        }}>
            <div style={{
                padding: '0 8px',
                backgroundColor: 'blue',
                borderRadius: 4,
                color: '#fff',
                cursor: 'pointer',
                whiteSpace: 'nowrap'
            }}>{curComponent?.desc}</div>
        </div>
    </>), el!)
}